<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body onload=main()>
<canvas id='webgl' width="400" height='400'>如果你看见我，就请更换别的浏览器查看效果</canvas>
<script src='lib/webgl-utils.js'></script>
<script src='lib/webgl-debug.js'></script>
<script src='lib/cuon-utils.js'></script>
<script>
    let VSHADER_SOURCE='attribute vec4 a_position;void main(){gl_Position=a_position;gl_PointSize=10.0;}'	
    let FSHADER_SOURCE='void main(){gl_FragColor=vec4(1.0,0.0,0.0,1.0);}'
    function main(){
    	let canvas=document.getElementById('webgl')
        let gl=getWebGLContext(canvas)
        if(!gl){
            console.log('WebGl 获取失败');
            return;
        }
        if(!initShaders(gl,VSHADER_SOURCE,FSHADER_SOURCE)){
        	console.log('初始化shaders失败');
        }
        let n=initVertexBuffer(gl);
        gl.clearColor(0.0,0.0,0.0,1.0)
        gl.clear(gl.COLOR_BUFFER_BIT)
        gl.drawArrays(gl.POINTS,0,n)
        
    }

    function initVertexBuffer(gl){
    	let vertices=new Float32Array([0.0,0.5,-0.5,-0.5,0.5,-0.5])
        let n=3;
        let vertexBuffer=gl.createBuffer();
        if(!vertexBuffer){
            console.log('创建buffer失败');
            return;
        }
        gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer)
        gl.bufferData(gl.ARRAY_BUFFER,vertices,gl.STATIC_DRAW)

        let a_position=gl.getAttribLocation(gl.program,'a_position')
        gl.vertexAttribPointer(a_position,2,gl.FLOAT,false,0,0)
        gl.enableVertexAttribArray(a_position)
        return n;
    }

</script>


</body>
</html>